<template>
  <div class="right-panel">
    <div class="info-card">
      <h3>系统基础信息</h3>
      <div class="info-content" v-html="deviceInfo"></div>
    </div>

    <div class="fault-info-card">
      <h3>故障信息</h3>
      <div class="fault-content">
        <p><strong>发生时间:</strong> {{ currentFaultInfo.time || '暂无数据' }}</p>
        <p><strong>故障类型:</strong> {{ currentFaultInfo.type || '暂无数据' }}</p>
        <p><strong>处理方法:</strong> {{ currentFaultInfo.method || '暂无数据' }}</p>
        <p
          v-if="!currentFaultInfo.time && !currentFaultInfo.type"
          style="color: #888; margin-top: 10px"
        >
          暂无最新故障信息
        </p>
      </div>
    </div>

    <div class="evaluation-card">
      <h3>工艺运行状态评估</h3>
      <div class="chart-container">
        <MainEvaluationChart :device="currentDevice" />
      </div>
      <p style="font-size: 0.9em; color: #555; margin-top: 15px">
        当前工艺参数波动正常，无明显异常。 请持续关注关键指标变化趋势。
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, computed } from 'vue'
import MainEvaluationChart from './MainEvaluationChart.vue' // 导入图表组件

const props = defineProps({
  currentDevice: {
    // 当前选中的装置名称
    type: String,
    required: true,
  },
  deviceInfo: {
    // 已经格式化好的 HTML 字符串
    type: String,
  },
})

// 硬编码的故障信息数据
const STATIC_FAULT_DATA = {
  联醇装置: {
    time: '2025-06-30 14:30:15',
    type: '传感器 A 异常 (FI615超限)',
    method: '检查 FI615 传感器连接，校准或更换。',
  },
  解吸浓缩系统装置: {
    time: '2025-06-29 09:00:00',
    type: '泵 B1 过载',
    method: '检查泵 B1 电流和振动，确认是否有堵塞或机械故障。',
  },
  // 您可以在这里为其他装置添加更多的故障信息
}

// 计算属性：根据 currentDevice 返回对应的故障信息
const currentFaultInfo = computed(() => {
  // 如果 props.currentDevice 不在 STATIC_FAULT_DATA 中，则返回一个默认的无数据对象
  return (
    STATIC_FAULT_DATA[props.currentDevice] || {
      time: '',
      type: '暂无相关故障信息',
      method: '',
    }
  )
})

// 组件挂载时
onMounted(() => {
  // 不再需要调用后端接口获取故障信息，因为数据是静态的
  console.log('RightPanel: Component mounted with static fault info.')
})

// 监听 currentDevice prop 的变化
watch(
  () => props.currentDevice,
  (newDevice) => {
    // 仅在控制台打印日志，不再触发数据获取
    console.log(
      `RightPanel: currentDevice prop changed to: ${newDevice}. Displaying static fault info.`,
    )
  },
)
</script>

<style scoped>
.right-panel {
  flex: 1; /* 占据 main-content-panels 的 1 份水平空间 */
  display: flex;
  flex-direction: column; /* 子项垂直排列 */
  gap: 20px; /* 卡片之间的间距 */
  min-height: 0;
}

/* 所有卡片的基础样式 */
.info-card,
.fault-info-card, /* 新增的故障卡片 */
.evaluation-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  overflow-y: auto; /* 允许内容滚动 */
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 调整各卡片的 flex 比例 */
.info-card {
  flex: 1; /* 系统基础信息 1 份 */
}

.fault-info-card {
  flex: 1; /* 故障信息 1 份 */
}

.evaluation-card {
  flex: 2; /* 工艺运行状态评估 2 份 */
}

/* 卡片标题样式 */
.info-card h3,
.fault-info-card h3,
.evaluation-card h3 {
  color: #3f51b5;
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.1em;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  flex-shrink: 0; /* 标题不收缩 */
}

/* 系统基础信息内容样式 */
.info-content p {
  margin-bottom: 8px;
  font-size: 0.9em;
  color: #555;
}
.info-card .info-content {
  flex: 1; /* 让 info-content 区域填充 info-card 的剩余空间 */
  overflow-y: auto; /* 如果基础信息内容过多，允许滚动 */
}

/* 故障信息内容样式 */
.fault-content p {
  margin-bottom: 8px;
  font-size: 0.9em;
  color: #555;
}
.fault-info-card .fault-content {
  flex: 1; /* 填充剩余空间 */
  overflow-y: auto;
}

/* 图表容器样式 */
.chart-container {
  position: relative;
  height: 380px; /* 图表区域的固定高度 */
  width: 100%;
  margin-top: 10px;
  flex-shrink: 0; /* 防止图表容器被压缩 */
}

/* 评估卡片下方的说明文本样式 */
.evaluation-card p {
  font-size: 0.9em;
  color: #555;
  margin-top: 15px;
  flex-shrink: 0;
}
</style>
